import dragonBones from './plugins/pixi-dragonbones'

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container

const params = {
    width: 1000, // default: 800
    height: 1000, // default: 600
    antialias: true, // default: false
    transparent: true, // default: false
    resolution: 1, // default: 1
};

const app = new PIXI.Application(params);
// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

app.stop();

// load spine data
PIXI.Loader.shared
    .add('skeleton', './public/dragon/Dragon_ske.json')
    .add('texture_json', './public/dragon/Dragon_tex.json')
    .add('texture_png', './public/dragon/Dragon_tex.png')
    .load(onAssetsLoaded);

function onAssetsLoaded(loader, res) {
    const factory = dragonBones.PixiFactory.factory;

    factory.parseDragonBonesData(res.skeleton.data);
    factory.parseTextureAtlasData(res.texture_json.data, res.texture_png.texture);

    const armatureDisplay = factory.buildArmatureDisplay('Dragon', 'Dragon');
    armatureDisplay.animation.play('stand');
    armatureDisplay.x = 400.0;
    armatureDisplay.y = 500.0;

    app.stage.addChild(armatureDisplay);

    app.start();
}
